<template>
  操作按钮，基于el-button二次开发，支持快捷键，alt + a：添加按钮被单击。快捷键可设置
  <hr>
  <nf-button
    v-bind="buttonMeta"
    :componentKind="componentKind"
    :active="active"
    :moduleId="moduleId"
  >
  </nf-button><br><br>
  <el-button type="" @click="click1">设置选择</el-button>
  <el-button type="" @click="click2">清除选择</el-button><br>
</template>

<script>
  import { reactive, watch, nextTick } from 'vue'
  import { ElButton, ElLoading } from 'element-plus'
  import _buttonMeta from './button.json'
  import { lifecycle } from '/nf-ui-core'

  import form from '../form/index.vue'
  import list from '../button/index.vue'

</script>

<script setup>
  lifecycle('按钮组件', true)
  import useActive from '../activation.js'

  const loadingInstance1 = ElLoading.service({ fullscreen: true })
  nextTick(() => {
    loadingInstance1.close()
  })

  const buttonMeta = reactive(_buttonMeta)

  buttonMeta.events = {
    deleteClick: (id, meta) => {
      console.log('按了删除按钮：', id, meta)
      return true
    }
  }

  // 弹窗打开的组件的字典
  const componentKind = {
    form,
    list
  }

  const moduleId = new Date().valueOf()

  const { active } = useActive(moduleId)
  
  const click1 = () => {
    buttonMeta.dataId = '123'
  }
  const click2 = () => {
    buttonMeta.dataId = ''
  }
  
</script>